﻿/** 绘制SVG折现必须的变量*/
objdiv = new Array();
objcyc = new Array();
objcd = new Array();
objdef = new Array();
var i = 0;
var mousedown = false;
var mouseup = true;
var draw = false;
var lines = "";
var sideLines = "";
var postline = "|";
var k = 0;
var infovalue = "";
var imageTag = false;
var svg = "";
var str = "";
var path_line;
var cd_num = 7;
var editCdFlag = false;
var clickNumber = 0;
var clickNumber1 = 0;
var pathNum = 0;
/** 存储路径上点的坐标*/
var cx = new Array();
var cy = new Array();
var editPathFlag = false;
var addPathFlag = false;
var insertId = 0;
var initTime = new Date();
var initreachTime = initTime.getTime();
var pathside = new Array(); //先声明一维
for (var i = 0; i < 1000; i++) {
    pathside[i] = {
        "xo": 0,
        "yo": 0,
        "date": initreachTime,
        "id": "aaa",
        "length": 0,
        "time": 0
    };
}

$("#editCd").click(function () {
    if (clickNumber % 2 == 0) {
        editCdFlag = true;
        $("#editCd").attr("class", "btn btn-success");
        $("#editCd").text("结束编辑");
        document.getElementById("saveCd").style.visibility = "visible";
    } else {
        editCdFlag = false;
        $("#editCd").attr("class", "btn btn-secondary");
        $("#editCd").text("启用编辑");
        document.getElementById("saveCd").style.visibility = "hidden";
        $("#cdx").val("");
        $("#cdy").val("");
        $("#clabelT").val("");
    }
    clickNumber++;
})

$("#compath").click(function () {
    if (clickNumber1 % 2 == 0) {
        editPathFlag = true;
        str = "";
        $("#path1").remove();
        for (var i = 0; i < pathNum; i++) {
            if (pathside[i].id == "addYes") {
                pathside.splice(i, 1);
                pathNum = pathNum - 1;
            }
        }
        $("#compath").attr("class", "btn btn-success");
        $("#compath").text("结束编辑");
    } else {
        editPathFlag = false
        $("#compath").attr("class", "btn btn-secondary");
        $("#compath").text("完善路径");
    }
    clickNumber1++;
})


/** 存储路径上点的个数*/
var sideNum = 0;

/** 存储路径上点之间的距离*/
var besideLength = new Array();
besideLength[0] = 0;

/** 存储路径上点之间匀速到达需要的时间*/
var besideTime = new Array();
besideTime[0] = 0;

function drawCd() {
    pathNum = 0;
    var clx = $("#cdx").val();
    var cly = $("#cdy").val();
    var clabelT = $("#clabelT").val();
    if ((!clx) || (!cly)) {
        alert("请输全测点坐标");
    } else {
        objcd[cd_num] = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        objcd[cd_num].setAttribute("stroke-width", "2");
        objcd[cd_num].setAttribute("stroke", "black");
        objcd[cd_num].setAttribute("r", "10");
        objcd[cd_num].setAttribute("cx", clx);
        objcd[cd_num].setAttribute("cy", cly);
        objcd[cd_num].setAttribute("fill", "green");
        objcd[cd_num].setAttribute("id", "cd" + cd_num);
        objcd[cd_num].setAttribute("onclick", "editCd(this)");
        objcd[cd_num].setAttribute("onmousedown", "comPathDown(this)");
        objcd[cd_num].setAttribute("text", clabelT);
        objcd[cd_num].setAttribute("text1", cd_num);
        $("svg").append(objcd[cd_num]);
        cd_num = cd_num + 1;
        $("#cdx").val("");
        $("#cdy").val("");
        $("#clabelT").val("");
    }
}

function editCd(e) {
    var myDate = new Date();
    var reachTime = myDate.getTime();
    if (draw == false && editCdFlag == false) {
        $(e).remove();
    } else if (draw == false && editCdFlag == true) {
        $("#cdx").val($(e).attr("cx"));
        $("#cdy").val($(e).attr("cy"));
        $("#clabelT").val($(e).attr("text"));
        $("#cNo").val($(e).attr("text1"));
    } else if (draw == true) {
        var xo = $(e).attr("cx");
        var yo = $(e).attr("cy");
        lines = lines + xo + " " + yo + " L";
        pathside[pathNum].xo = xo;
        pathside[pathNum].yo = yo;
        pathside[pathNum].date = reachTime;
        pathside[pathNum].id = $(e).attr("id");
        pathNum = pathNum + 1;
    }
}

function comPathDown(e) {
    addPathFlag = true;
    if (editPathFlag == true && addPathFlag == true) {
        var evid = $(e).attr("id");
        //  console.log(evid);
        for (var i = 0; i < pathNum; i++) {
            if (evid === pathside[i].id) {
                insertId = i;
                //  console.log(pathside[i].id);
                break;
            }
        }
        //  console.log("insertID="+insertId);
    } else {
        // console.log("路径完善已结束");
    }
}

function comPathUp(e) {
    if (editPathFlag == true && addPathFlag == true) {
        var ev = e || window.event;
        var xo = ev.clientX;
        var yo = ev.clientY;
        //  console.log("xo="+xo+" yo="+yo);
        var addlength = Math.sqrt(Math.pow((pathside[insertId].xo - xo), 2) + Math.pow((pathside[insertId].yo - yo), 2));
        pathside.splice(insertId + 1, 0, {
            "xo": xo,
            "yo": yo,
            "length": addlength,
            "time": initreachTime,
            "id": "addSide"
        });
        pathNum = pathNum + 1;
        insertId = insertId + 1;
    } else {
        // console.log("路径完善已结束");
    }
}

function comPathUpE(e) {
    if (editPathFlag == true && addPathFlag == true) {
        var evid = $(e).attr("id");
        // console.log(evid);
        for (var i = 0; i < pathNum; i++) {
            if (evid === pathside[i].id) {
                insertId = i;
                console.log(pathside[i].id);
                break;
            }
        }
        // console.log("insertID="+insertId);
        addPathFlag = false;
    } else {
        // console.log("路径完善已结束");
    }
}


function saveCd() {
    var clx = $("#cdx").val();
    var cly = $("#cdy").val();
    var clabelT = $("#clabelT").val();
    var cNo = $("#cNo").val();
    objcd[cNo].setAttribute("cx", clx);
    objcd[cNo].setAttribute("cy", cly);
    objcd[cNo].setAttribute("text", clabelT);
    $("#cdx").val("");
    $("#cdy").val("");
    $("#clabelT").val("");
    $("#cNo").val("");
}

function endWay() {
    draw = false;

    /**按时间顺序排列路径坐标 */
    var preIndex, current;
    for (var i = 1; i < pathNum; i++) {
        preIndex = i - 1;
        var current = pathside[i];
        while (preIndex >= 0 && pathside[preIndex].date > current.date) {
            pathside[preIndex + 1] = pathside[preIndex];
            preIndex--;
        }
        pathside[preIndex + 1] = current;
    }
}

/**鼠标点击屏幕后获得点击位置的坐标 */
function getMousePos(e) {
    /** 获取点击事件*/
    var ev = e || window.event;
    var xo = ev.clientX;
    var yo = ev.clientY;
    var myDate = new Date();
    var reachTime = myDate.getTime();
    if (draw == true) {
        lines = lines + xo + " " + yo + " L";
        pathside[pathNum].xo = xo;
        pathside[pathNum].yo = yo;
        pathside[pathNum].date = reachTime;
        pathside[pathNum].id = pathNum;
        pathNum = pathNum + 1;
        //设置折线经过的坐标属性属性
        // objdiv[i].setAttribute("d", lines);
    } else {
        lines = "";
        alert("请点击开始绘制按钮");
    }
}

function drawWay() {
    draw = true;
    pathNum = 0;
    alert("绘制路径时，双击地图绘制非测点，单击选择测点");
    $("#path1").remove();
}

function startTween() {
    var startId = 0;
    var endId = 0;
    var sTime = 0;
    var slength = 0;
    var speed = $("#amount").text();
    lines = "";
    str = "";
    console.log("pathsideNum=" + pathNum);
    for (var i = 1; i < pathNum; i++) {
        pathside[i].length = Math.sqrt(Math.pow((pathside[i].xo - pathside[i - 1].xo), 2) + Math.pow((pathside[i].yo - pathside[i - 1].yo), 2));
    }
    for (var i = 0; i < pathNum; i++) {
        console.log("id=" + pathside[i].id + " cx=" + pathside[i].xo + " cy=" + pathside[i].yo + " date=" + pathside[i].date + " length=" + pathside[i].length + " time=" + pathside[i].time);
    }
    for (var i = 0; i < pathNum; i++) {
        if (pathside[i].id == "addSide") {
            var j = i;
            startId = j;
            while (pathside[j].id == "addSide") {
                slength = slength + pathside[j].length;
                j++;
            }
            endId = j;
            slength = slength + pathside[endId].length;
            sTime = pathside[j].time;
            console.log("startId=" + startId + " endID=" + endId + " sTime=" + sTime);
            for (var k = startId; k < endId; k++) {
                pathside[k].id = "addYes";
                pathside[k].date = pathside[k - 1].date + (pathside[endId].date - pathside[k - 1].date) * pathside[k].length / slength;
            }
        }
    }
    for (var i = 1; i < pathNum; i++) {
        pathside[i].time = (pathside[i].date - pathside[i - 1].date) / 1000;
    }
    for (var i = 0; i < pathNum; i++) {
        console.log("id=" + pathside[i].id + " cx=" + pathside[i].xo + " cy=" + pathside[i].yo + " date=" + pathside[i].date + " length=" + pathside[i].length + " time=" + pathside[i].time);
        lines = lines + pathside[i].xo + " " + pathside[i].yo + "L";
    }
    var endlength = parseInt(lines.length - 1);
    str = lines.substring(0, endlength);
    lines = "M" + str;
    console.log("lines=" + lines);
    str = lines;
    objdiv[0] = document.createElementNS("http://www.w3.org/2000/svg", "path");
    objdiv[0].setAttribute("fill", "none");
    objdiv[0].setAttribute("stroke", "green");
    objdiv[0].setAttribute("stroke-dasharray", "5,5");
    objdiv[0].setAttribute("id", "path1");
    objdiv[0].setAttribute("d", str);
    objdiv[0].setAttribute("stroke-width", "4");
    $("svg").append(objdiv[0]);
    var tl = new TimelineLite();
    for (var i = 0; i < pathNum - 1; i++) {
        var j = i + 1;
        /** 增加点与点之间的动画*/
        tl.add(
            TweenMax.fromTo('#circle', pathside[j].time, {
                x: pathside[i].xo,
                y: pathside[i].yo,
                opcaity: 1
            }, {
                x: pathside[j].xo,
                y: pathside[j].yo,
                ease: Linear.easeNone
            }));
    }
    /** 播放动画*/
    tl.eventCallback("onUpdate", updateSlider);
    $("#slider").slider({
        range: false,
        min: 0,
        max: 100,
        step: .1,
        slide: function (event, ui) {
            tl.pause();
            tl.progress(ui.value / 100);
        }
    });

    function updateSlider() {
        $("#slider").slider("value", tl.progress() * 100);
    }
    tl.timeScale(speed);
    tl.play();
    $("#pausTween").click(function () {
        tl.pause();
    });
    $("#resuTween").click(function () {
        tl.resume();
    });

}